<!--
 * @Author: xjt
 * @Date: 2021-06-24 23:05:13
 * @LastEditTime: 2021-06-30 20:18:22
 * @Description: 隔离人员工作值班
 * @LastEditors: cqg
-->
<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <div class="v-medicalMonitor-basi">
      <dataList
        placeholder="请输入姓名"
        searchName="name"
        :pageInfo="pager"
        :listData="tableData"
        :filterList="filterList"
        :selectData="selectDataArr"
        :menuList="['add']"
        @menu-click="handleMenuClick"
        :dataInfo="dataInfo"
        :operaInfo="operaInfo"
        @btn-click="handleBtnClick"
        operaColumnWidth="120"
        :openIndex="true"
      ></dataList>
      <!-- 新增|编辑|查看 -->
      <DutyDialog ref="dutyDialog" title="工作人员排班" width="60%" @submit="dutySubmit"></DutyDialog>
    </div>
  </basic-container>
</template>
<script>
import DutyDialog from "./dialog";

import { getDutyList, delObj } from "@/views/yq-personnel/api/duty.js";
import { conversion, extractName } from "@/utils/extract";

export default {
  components: {
    DutyDialog,
  },
  provide() {
    return {
      //初始化数据
      initList: this.queryData,
    };
  },

  beforeMount() {
    this.queryData();
  },
  data() {
    return {
      // 表格列表数据
      tableData: [],
      curIndex: 0,
      // 请求参数
      params: {
        current: 1,
        size: 10,
        keyword: "",
      },
      historyData: [{}],
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20, // 每页显示多少条
      },
      // 页面loading
      loading: false,
    };
  },
  computed: {
    // 操作按钮
    operaInfo() {
      return [
        { label: "编辑", name: "edit" },
        { label: "删除", name: "delete" },
        "preview",
      ];
    },
    // 筛选项
    filterList() {
      return [{ label: "姓名", inputType: "input", name: "name" }];
    },
    dataInfo() {
      return [
        { label: "隔离点名称", prop: "hotelName" },
        {
          label: "所属区划",
          prop: "hotelStreet",
          formatter: this.dataFormatter,
        },
        { label: "姓名", prop: "name" },
        { label: "证件号码", prop: "cardId" },
        { label: "联系方式", prop: "telPhone" },
        { label: "职务", prop: "post" },
        {
          label: "人员类型",
          prop: "personType",
          formatter: this.dataFormatter,
        },
        { label: "值班开始时间", prop: "dutyStartTime" },
        { label: "值班结束时间", prop: "dutyEndTime" },
        {
          label: "备注",
          prop: "remark",
        },
      ];
    },
  },
  methods: {
    //格式化表格字典值
    dataFormatter(row, column, cellValue) {
      switch (column.property) {
        case "cardType":
          return extractName("hotel_street", row.cardType);
        case "personState":
          return extractName("person_state", row.personState);
        default:
          break;
      }
    },
    async submitHealth() {
      // 表单提交
      /*   const value = conversion(this.popUpdata);
        const { data } = await dailyhealth(value);
        if (data.code === 0) {
          this.$refs.newlyStatus.changeVisible();
          this.popUpdata = this.$options.data().popUpdata;
        } */
    },
    changeTabs(value) {
      this.curIndex = value;
    },
    // 数据请求
    queryData(params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      this.tableData = [{}];
      getDutyList(requestData)
        .then((res) => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //表格按钮点击事件监听
    handleBtnClick(type, row = {}) {
      switch (type) {
        case "preview":
          this.$refs.dutyDialog.show({ type, row });
          break;
        case "edit":
          this.$refs.dutyDialog.show({ type, row });
          break;
        case "delete":
          this.$confirm("此操作将永久删除该数据, 是否继续?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              try {
                await delObj([row.dutyInfoId]);
                this.$message.success("删除成功!");
                this.queryData({ current: 1 });
              } catch (error) {
                this.$message.fail("删除失败!");
              }
            })
            .catch(() => {
              this.$message.info("已取消删除");
            });
          break;
        default:
          break;
      }
    },
    // 菜单点击监听
    handleMenuClick(type) {
      switch (type) {
        case "add":
          this.$refs.dutyDialog.show({ type: "add" });
          break;
        default:
          this.$message(type);
          break;
      }
    },
    dutySubmit() {
      //弹窗提交
    },
  },
};
</script>

<style lang="scss" scoped>
.v-medicalMonitor-basi {
  .tabs-ul {
    display: flex;
    li {
      padding: 15px 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #ccc;
      border-right-width: 0;
    }
    li:last-of-type {
      border-right-width: 1px;
    }
    .active {
      background: #2f54eb;
      color: white;
    }
  }
  #myChart {
    height: 300px;
  }
  .history-div {
    .title {
      background: #e4f1f9;
      margin: 10px 0;
      padding: 10px 20px;
      color: #1a92f1;
      font-weight: bold;
    }
    .history-detail {
      .timer {
        color: #1a92f1;
      }
      .heat {
        color: #3ad47e;
      }
      span {
        font-weight: bold;
        margin-right: 10px;
        span {
          font-weight: 500;
          margin-left: 5px;
        }
      }
      .update {
        float: right;
      }
    }
  }
}
</style>
